<template>
  <div class="archive" v-if="groupedArticles.length">
    <h1 class="archive-title">文章归档</h1>
    <div class="archive-body">
      <div class="archive-line"></div>
      <div :key="year.year" class="year-group" v-for="year in groupedArticles">
        <div class="year-line">
          <h2 class="year-title">{{ year.year }}年<span class="year-circle">（共{{ year.totalArticles }}篇）</span></h2>
        </div>
        <div :key="month.month" class="month-group" v-for="month in year.months">
          <h3 class="month-title">{{ month.month }}月</h3>
          <ul>
            <li class="article-item" v-for="article in month.articles" :key="article.id">
              <span class="article-date">{{ formatDate(article.publish_date) }}</span>
              <span class="article-title">
                <router-link :to="{ name: 'article-detail', params: { id: article.id } } " class="article-title">{{ article.title }}</router-link>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div v-else class="no-data">
    <p>暂无归档文章</p>
  </div>
</template>

<script setup>

// 定义响应数据
const articles = ref([]);
const groupedArticles = ref([]);

// 获取数据
const fetchArchivedArticles = async () => {
  try {
    const response = await axios.get("/api/cms/articles/get_archive/");
    articles.value = response.data;
    groupArticlesByYearAndMonth(); // 调用分组方法
  } catch (error) {
    console.error("获取归档文章失败:", error);
  }
};

// 分组方法
const groupArticlesByYearAndMonth = () => {
  const groups = {};

  articles.value.forEach(article => {
    const date = new Date(article.publish_date);
    const year = date.getFullYear();
    const month = date.getMonth() + 1; // 获取月份 (0-11)，加1转为 (1-12)

    // 确保年份和月份组存在
    if (!groups[year]) {
      groups[year] = { year, months: {}, totalArticles: 0 };
    }
    if (!groups[year].months[month]) {
      groups[year].months[month] = { month, articles: [] };
    }
    groups[year].months[month].articles.push(article);
    groups[year].totalArticles += 1;
  });

  // 将对象转换为数组并进行排序
  groupedArticles.value = Object.keys(groups).map(year => ({
    year: groups[year].year,
    totalArticles: groups[year].totalArticles,
    months: Object.keys(groups[year].months).sort((a, b) => b - a).map(month => ({
      month: parseInt(month),
      month_count: groups[year].months[month].articles.length,
      articles: groups[year].months[month].articles.map(article => ({
        id: article.id,
        url: article.url,
        title: article.title,
        publish_date: article.publish_date
      }))
    }))
  })).sort((a, b) => b.year - a.year); // 按年份排序
};

// 格式化日期
const formatDate = (datetime) => {
  const dateObj = new Date(datetime);
  const month = dateObj.getMonth() + 1;
  const date = dateObj.getDate();
  const hours = dateObj.getHours();
  const minutes = dateObj.getMinutes();
  return `${month.toString().padStart(2, "0")}月${date.toString().padStart(2, "0")}日 ${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
};

// 组件挂载时加载数据
onMounted(() => {
  fetchArchivedArticles();
});
</script>

<style scoped>
.archive {
  background-color: var(--card-bg-color, #fff); /* 背景色 */
  padding:15px;
  margin: 0 auto 20px auto;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  min-height: 100vh; /* 最小高度 */
}

.archive-title {
  font-size: 2em;
  padding: 10px 0;
  color: var(--card-title-color,#007bff); /* 标题颜色 */
  align-self: center; /* 居中 */
}

.archive-body {
  position: relative; /* 为绝对定位子元素提供相对定位 */
  padding-left: 25px; /* 为内容留出空间 */
  margin: 20px;
}

.archive-line {
  position: absolute; /* 绝对定位 */
  left: 10px; /* 竖线相对于内容的偏移 */
  top: 0; /* 竖线从顶部开始 */
  bottom: 0; /* 延伸到底部 */
  width: 2px; /* 竖线的宽度 */
  background-color: var(--card-border-color, #00bfae); /* 竖线颜色 */
}

.year-line {
  position: relative; /* 为圆点提供定位 */
}

.year-line::before {
  content: '';
  position: absolute;
  left: 0; /* 竖线相对于年份标题的左边位置 */
  top: 0; /* 竖线从顶部开始 */
  bottom: 0; /* 竖线延伸到底部 */
  background-color: #007bff; /* 竖线颜色 */
}

.year-line::after {
  content: '';
  position: absolute;
  top: 0; /* 圆点相对于年份标题的顶部位置 */
  left: -20px; /* 调整圆点的位置，减少此值会向左移动，增加会向右移动 */
  width: 12px; /* 圆点直径 */
  height: 12px; /* 圆点直径 */
  background-color: var(--card-link-color, #00bfae); /* 圆点颜色 */
  border-radius: 50%; /* 圆形 */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); /* 圆点阴影 */
}

.year-group {
  margin-bottom: 30px;
}

.year-title {
  font-size: 1.5em;
  padding-left: 10px;
  color: #333; /* 字体颜色 */
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.year-circle {
  font-size: 0.8em;
  color: var(--card-text-color,#999); /* 圆点颜色 */
  font-weight: normal;
}

.month-group {
  margin-top: 10px;
  padding-left: 20px;
}

.month-title {
  font-size: 16px;
  margin-bottom: 5px;
  color: var(--card-title-color, #007bff); /* 月份标题颜色 */
}

.article-item {
  list-style-type: none; /* 去除列表样式 */
  margin-left: 20px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 5px;
}

.article-date {
  font-weight: bold;
  margin-right: 10px; /* 日期和标题之间的间隔 */
  color: var(--card-text-color,#555); /* 日期颜色 */
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; /* 字体 */
}

.article-title {
  color: #5fb878; /* 标题背景色 */
  font-size: 1.1em; /* 文章标题字体大小 */
  text-decoration: none; /* 去除超链接下划线 */
}

.article-title:hover {
  color: #007bff; /* 标题悬停颜色 */
}

.article-item::before {
  content: "•"; /* 添加项目符号 */
  position: absolute;
  left: -10px; /* 项目符号位置 */
  color: var(--card-link-color, #007bff); /* 项目符号颜色 */
}
.no-data {
  text-align: center;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  font-size: 14px;
  color: #666;
}
</style>
